<template>
	<div style="--wails-draggable: drag">
		<div id="myChart"></div>
		<div>
			<p v-for="(item,index) in scanArr" :key="index">{{ item.index }}.{{ item.text }}</p>
		</div>
	</div>
</template>

<script>
import * as echarts from "echarts";
import { WindowSetSize, EventsOn,OnFileDrop } from "../../wailsjs/runtime/runtime";
export default {
	name: "chart",
	data() {
		return {
			name: "图片合成Plist",
			winsSize: {
				w: 300,
				h: 500,
			},
			chart: null,
			options: {},
			timer: {},
			scanResult:"",
			scanArr:[],
			scanCount:0,
		};
	},
	mounted() {
		WindowSetSize(this.winsSize.w, this.winsSize.h);
		this.initOptions();
		this.initCharts();
		this.AddEvent()
	},
	methods: {
		// 注册事件
		AddEvent() {
			let that = this;
			EventsOn("sysInfoPublish", (msg) => {
				that.chart.setOption({
					series: [
						{
							data: [
								{
									value: msg,
								},
							],
						},
					],
				});
				console.log(msg);
			});
			EventsOn("scanResult", (msg) => {
				console.log("scanResult",msg);
				this.scanCount++
				this.scanArr.push({index:this.scanCount,text:msg}); 
			});
			OnFileDrop((x,y,paths)=>{
				console.log(x,y,paths)
			},false)
		},

		initOptions() {
			this.options = {
				tooltip: {
					formatter: "{a} <br/>{b} : {c}%",
				},
				series: [
					{
						name: "Pressure",
						type: "gauge",
						progress: {
							show: true,
						},
						detail: {
							valueAnimation: true,
							formatter: "{value}",
						},
						data: [
							{
								value: 50,
								name: "SCORE",
							},
						],
					},
				],
			};
		},
		initCharts() {
			this.chart = echarts.init(document.getElementById("myChart"));
			this.chart.setOption(this.options);
		},
	},
};
</script>

<style scoped>
#myChart {
	width: 300px;
	height: 300px;
}
</style>
